<template>
  <div class="h-full pb-60 m-relative">
    <div class="p-20 h-full overflow-y-auto">
      <a-form ref="formRef" :model="form" size="medium" auto-label-width>
        <a-form-item label="类型名称" field="type">
          <a-input v-model="form.type" placeholder="请输入类型名称" />
        </a-form-item>
      </a-form>
    </div>
    <div class="m-absolute border-box b-0 l-0 r-0 h-60 flex flex-a-c bt-f0 px-20 flex-j-e">
      <a-space>
        <a-button @click="resetForm(true)">重置</a-button>
        <a-button type="primary" :loading="loading" @click="onOk">确定</a-button>
      </a-space>
    </div>
  </div>
</template>

<script setup>
import { lgCateEdit, lgCateAdd, lgCateDetail } from '@/apis'
import { Message } from '@arco-design/web-vue'
import { reAssign } from '@/utils/common'

const props = defineProps(['params', 'onClose'])

const formRef = ref()
const loading = ref(false)
const form = reactive({
  id: undefined,
  type: undefined
})

//回显表单值
onMounted(() => {
  if (props.params) {
    form.id = props.params.id
    resetForm(false)
  } else {
    reAssign(form, false)
  }
})

// 重置表单
const resetForm = async (flag = false) => {
  if (!form.id) reAssign(form, false)
  else {
    const res = await lgCateDetail({ id: form.id })
    reAssign(form, res?.data ?? {})
  }
  if (flag) Message.success('重置成功')
}

// 点击确认添加/编辑
const onOk = async () => {
  try {
    loading.value = true
    const validateResult = await formRef.value?.validate()
    if (validateResult) return false
    const api = form.id ? lgCateEdit : lgCateAdd
    await api(form)
    Message.success('操作成功')
    props.onClose()
    reAssign(form, false)
  } finally {
    loading.value = false
  }
}
</script>
<style lang="scss" scoped>
.r--100 {
  right: -110px;
}
</style>
